<template>
    <div class="button-group1">
        <el-button type="primary" @click="batchExportExcel">批量导出</el-button>
        <el-button type="success" @click="chooseExportExcel">选择导出</el-button>
    </div>
    <el-table :data="customerPageInfo.list" style="width: 100%" @selection-change="handSelection">
        <el-table-column type="selection" width="50"/>
        <el-table-column type="index" label="序号" width="55"/>
        <el-table-column property="ownerDo.name" label="负责人"/>
        <el-table-column property="activityDo.name" label="所属活动"/>
        <el-table-column property="clueDo.fullName" label="姓名">
            <template #default="scope">
                <a href="javascript:void(0)" @click="view(scope.row.id)">{{ scope.row.clueDo.fullName }}</a>
            </template>
        </el-table-column>
        <el-table-column property="appellationDo.typeValue" label="称呼"/>
        <el-table-column property="clueDo.phone" label="手机"/>
        <el-table-column property="clueDo.weixin" label="微信"/>
        <el-table-column property="needLoanDo.typeValue" label="是否贷款"/>
        <el-table-column property="intentionStateDo.typeValue" label="意向状态"/>
        <el-table-column property="sourceDo.typeValue" label="客户来源"/>
        <el-table-column property="intentionProductDo.name" label="意向产品"/>
        <el-table-column property="nextContactTime" label="下次跟踪时间"/>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="success" :icon="Message" circle @click="view(scope.row.id)"/>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        background layout="prev, pager, next, jumper, total"
        :total="customerPageInfo.total"
        :page-size="customerPageInfo.pageSize"
        @change="toPage"/>
</template>

<script setup>
import {Message} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {doDownload, doGet} from "@/http/httpRequest.js";
import {showMessage} from "@/util/message.js";
import {saveAs} from 'file-saver'
import {useRouter} from "vue-router";

/**
 * 响应式变量：存储客户列表分页数据
 * 包含当前页数据、总记录数、页码等分页相关信息
 */
let customerPageInfo = ref({});
/**
 * 存储选中的客户ID数组
 * 用于批量导出功能，记录用户在表格中选择的客户记录ID
 */
let idArray = [];
let router = useRouter();

/**
 * 组件挂载后执行的初始化操作
 * 立即加载第一页客户列表数据
 */
onMounted(() => {
    loadCustomerList(1);
})

/**
 * 加载客户列表数据
 * @param {number} current - 当前页码
 * 通过API获取指定页码的客户列表数据并更新分页信息
 */
const loadCustomerList = current => {
    doGet('/api/customers', {
        current: current
    }).then(resp => {
        if (resp.data.code == 200) {
            // 请求成功，更新客户列表分页数据
            customerPageInfo.value = resp.data.info;
        } else {
            // 请求失败，显示错误提示
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 处理表格行选中变化事件
 * @param {Array} item - 当前选中的行数据数组
 * 将选中行的ID提取并存储到idArray中，用于后续批量操作
 */
const handSelection = item => {
    idArray = []; // 清空之前的选中记录
    // 遍历选中项，提取ID并添加到数组中
    for (let index in item) {
        idArray.push(item[index].id);
    }
}

/**
 * 批量导出Excel文件
 * 导出所有客户数据为Excel文件并触发浏览器下载
 */
const batchExportExcel = () => {
    // 调用文件下载接口，传入空的ids参数表示导出所有数据
    doDownload('/api/exportExcel', {ids: ''}).then(resp => {
        // 创建Blob对象并触发浏览器下载
        saveAs(new Blob([resp.data], {type: 'application/vnd.ms-excel'}), '客户信息列表.xlsx');
    }).catch(error => {
        // 下载失败处理
        showMessage('文件下载失败' + error, 'error');
    })
}

/**
 * 选择导出Excel文件
 * 导出用户在表格中选择的客户数据为Excel文件并触发浏览器下载
 */
const chooseExportExcel = () => {
    // 将选中的客户ID数组转换为逗号分隔的字符串，用于API参数传递
    let ids = idArray.join(',');

    // 调用后端文件下载接口，传入选中的客户ID数组表示导出选中数据
    // doDownload是封装的下载方法，第一个参数是API路径，第二个参数是请求参数
    doDownload('/api/exportExcel', {ids: ids}).then(resp => {
        // 创建Blob对象并触发浏览器下载
        // new Blob()用于创建包含Excel数据的二进制对象
        // saveAs()是文件保存函数，第一个参数是Blob对象，第二个参数是默认文件名
        saveAs(new Blob([resp.data], {type: 'application/vnd.ms-excel'}), '客户信息列表.xlsx');
    }).catch(error => {
        // 下载失败处理：显示错误消息
        // showMessage是封装的消息提示函数，第一个参数是消息内容，第二个参数是消息类型
        showMessage('文件下载失败' + error, 'error');
    })
}

/**
 * 查看客户详情
 * @param {number} id - 客户ID
 * 跳转到客户详情页面
 */
const view = id => {
    router.push('/dashboard/customer/' + id);
}

/**
 * 分页页码变更处理函数
 * @param {number} current
 * 触发对应页码的列表数据加载
 */
const toPage = current => {
    loadCustomerList(current);
}
</script>

<style scoped>
.button-group1 {
    display: flex;
    justify-content: flex-end;
}

.el-table {
    margin-top: 20px;
}

.el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>